<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>熙心健康体检系统 - 预约列表</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", sans-serif;
    }

    body {
      background-color: #f5f7fa;
      display: flex;
    }

    /* 侧边栏样式 */
    .sidebar {
      width: 200px;
      background-color: #2f3b4b;
      color: #fff;
      min-height: 100vh;
    }

    .sidebar-header {
      padding: 20px;
      font-size: 18px;
      background-color: #242e3b;
    }

    .sidebar-nav {
      list-style: none;
    }

    .sidebar-nav li {
      padding: 12px 20px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .sidebar-nav li:hover {
      background-color: #3a4756;
    }

    .sidebar-nav li.active {
      background-color: #1f2730;
    }

    .sidebar-nav a {
      color: #fff;
      text-decoration: none;
    }

    .logout {
      text-align: right;
      padding: 10px 20px;
      color: #f56c6c;
      cursor: pointer;
    }

    /* 主体内容样式 */
    .main-content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
    }

    .breadcrumb {
      font-size: 14px;
      color: #999;
      margin-bottom: 10px;
    }

    .page-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .search-form {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 20px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      width: calc(20% - 20px);
    }

    .form-group label {
      font-size: 14px;
      margin-bottom: 5px;
      color: #666;
    }

    .form-group input,
    .form-group select {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .radio-group {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 5px;
    }

    .search-btn {
      padding: 8px 16px;
      background-color: #409eff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      align-self: flex-end;
      margin-top: 25px;
    }

    .table-container {
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      overflow-x: auto;
    }

    .table {
      width: 100%;
      border-collapse: collapse;
    }

    .table th,
    .table td {
      border: 1px solid #eee;
      padding: 10px;
      text-align: left;
      font-size: 14px;
    }

    .table th {
      background-color: #fafafa;
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      gap: 5px;
    }

    .pagination button {
      padding: 5px 10px;
      border: 1px solid #ccc;
      background-color: #fff;
      cursor: pointer;
      border-radius: 4px;
    }

    .pagination button.active {
      background-color: #409eff;
      color: #fff;
      border: 1px solid #409eff;
    }
  </style>
</head>

<body>
  <!-- 侧边栏 -->
  <aside class="sidebar">
    <div class="sidebar-header">熙心健康体检系统</div>
    <ul class="sidebar-nav">
      <li>首页</li>
      <li>体检预约</li>
      <li class="active">预约列表</li>
      <li>体检客户查询</li>
    </ul>
    
  </aside>

  <!-- 主体内容 -->
  <div class="main-content">
    <div class="breadcrumb">预约 / 预约列表</div>
    <div class="page-title">体检客户查询</div>

    <!-- 查询表单 -->
    <form class="search-form">
      <div class="form-group">
        <label>手机号</label>
        <input type="text" placeholder="输入搜索的手机号">
      </div>
      <div class="form-group">
        <label>姓名</label>
        <input type="text" placeholder="输入预约体检姓名">
      </div>
      <div class="form-group">
        <label>性别</label>
        <select>
          <option value="">选择性别</option>
          <option value="male">男</option>
          <option value="female">女</option>
        </select>
      </div>
      <div class="form-group">
        <label>预约院区</label>
        <select>
          <option value="">选择院区</option>
          <option value="north">熙康云医院-沈北院区</option>
          <option value="south">熙康云医院-浑南院区</option>
		  <option value="center">熙康云医院-中心院区</option>
          <!-- 可扩展更多院区 -->
        </select>
      </div>
      <div class="form-group">
        <label>套餐类型</label>
        <select>
          <option value="">预约套餐</option>
          <option value="typeA">套餐A</option>
		  <option value="typeA">套餐B</option>
		  <option value="typeA">套餐C</option>
          <!-- 可扩展更多套餐 -->
        </select>
      </div>
      <div class="form-group">
        <label>体检时间</label>
        <input type="date">
      </div>
      <div class="form-group">
        <label>是否归档</label>
        <div class="radio-group">
          <label><input type="radio" name="archive" value="0" checked> 未归档</label>
          <label><input type="radio" name="archive" value="1"> 已归档</label>
        </div>
      </div>
      <button type="button" class="search-btn" onclick="searchData()">查询</button>
    </form>

    <!-- 预约列表 -->
    <div class="table-container">
      <table class="table">
        <thead>
          <tr>
            <th>订单编号</th>
            <th>客户姓名</th>
            <th>客户手机号</th>
            <th>预约院区</th>
          </tr>
        </thead>
        <tbody id="tableBody">
          <!-- 模拟数据，实际可通过 JS 动态渲染 -->
          <tr>
            <td>2023100256211023</td>
            <td>张一山</td>
            <td>13100000000</td>
            <td>熙康云医院-沈北院区</td>
          </tr>
          <tr>
            <td>2023100256211023</td>
            <td>张一山</td>
            <td>13100000000</td>
            <td>熙康云医院-沈北院区</td>
          </tr>
          <tr>
            <td>2023100256211023</td>
            <td>张一山</td>
            <td>13100000000</td>
            <td>熙康云医院-沈北院区</td>
          </tr>
          <tr>
            <td>2023100256211023</td>
            <td>张一山</td>
            <td>13100000000</td>
            <td>熙康云医院-沈北院区</td>
          </tr>
          <tr>
            <td>2023100256211023</td>
            <td>张一山</td>
            <td>13100000000</td>
            <td>熙康云医院-沈北院区</td>
          </tr>
          <tr>
            <td>2023100256211023</td>
            <td>张一山</td>
            <td>13100000000</td>
            <td>熙康云医院-沈北院区</td>
          </tr>
          <tr>
            <td>2023100256211023</td>
            <td>张一山</td>
            <td>13100000000</td>
            <td>熙康云医院-沈北院区</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <div class="pagination" id="pagination">
      <button class="active" onclick="changePage(1)">1</button>
      <button onclick="changePage(2)">2</button>
      <button onclick="changePage(3)">3</button>
      <button onclick="changePage(4)">4</button>
      <button onclick="changePage(5)">5</button>
      <button onclick="nextPage()">&gt;</button>
    </div>
  </div>

  <script>
    // 模拟查询函数（可扩展为 Ajax 请求）
    function searchData() {
      // 这里可获取表单数据，向后端请求并更新表格
      alert('执行查询逻辑，可扩展 Ajax 请求');
    }

    // 分页切换
    function changePage(page) {
      const buttons = document.querySelectorAll('.pagination button');
      buttons.forEach(btn => btn.classList.remove('active'));
      event.target.classList.add('active');
      // 实际需根据 page 加载对应数据
      alert(`切换到第 ${page} 页`);
    }

    function nextPage() {
      // 实际需处理页码递增和数据加载
      alert('下一页逻辑，可扩展');
    }
  </script>
</body>

</html>